<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">活动发布</view>
		<uni-card class="card">
			<uni-section>
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" style="border-radius: 80rpx;" />
				</view>
				<view class="content">
					<view v-if="current === 0">
						<view class="items" v-for="item in publishedActivities" :key="item.noticeId" @click="goXiangQing(item)">
							<view class="items_left">
								<view class="items_left_top">
									{{ item.noticeTitle }}
								</view>
								<view class="items_left_bottom">
									{{ item.createTime }}
								</view>
							</view>
							<view class="items_right">
								<button @click.stop="delActivity(item.noticeId)">删除</button>
							</view>
						</view>
					</view>
					<view v-if="current === 1">
						<view class="items2" v-for="item in unpublishedActivities" :key="item.noticeId" @click="goXiangQing(item)">
							<view class="items_left">
								<view class="items_left_top">
									{{ item.noticeTitle }}
								</view>
								<view class="items_left_mid" :style="{ color: getStatusColor(item.status) }">
									{{ getStatusText(item.status) }}
								</view>
								<view class="items_left_bottom">
									{{ item.createTime }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-section>
		</uni-card>
		<button class="bottom" @click="goFabu">
			<image src="/static/加号@3x.png"></image>
			发布活动
		</button>
	</view>

</template>

<script setup>
	import request from '../../../utils/request';
	import {onMounted, ref, computed} from 'vue';
	
	onMounted(()=>{
		userInfo.value = uni.getStorageSync("userinfo");
		// console.log(userInfo.value.id)
		getActivities();
	})
	
	//根据活动id删除活动信息
	function delActivity(noticeId) {
		// 显示确认删除的弹窗
		uni.showModal({
			title: '确认删除',
			content: '确定要删除该活动吗？',
			success: function(res) {
				if (res.confirm) {
					// 用户点击确定，调用删除API
					request({
						url: 'notice/notice/'+noticeId,
						method: 'DELETE',
						success(res) {
							const result = res.data;
							if (result.code == 200) {
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
								// 重新获取活动列表
								getActivities();
							} else {
								uni.showToast({
									title: result.msg || '删除失败',
									icon: 'none'
								});
							}
						},
						fail() {
							uni.showToast({
								title: '网络请求失败',
								icon: 'none'
							});
						}
					});
				}
			}
		});
	}
	
	//获取活动信息
	function getActivities(){
		request({
			url:'notice/notice/getActivityByShopUserId',
			method:'GET',
			data:{userId: userInfo.value.id},
			success(res){
				// console.log(res);
				const result = res.data;
				if (result.code == 200){
					activities.value = result.data
					// console.log(activities.value)
					// uni.showToast({
					//   title: '操作成功',
					//   icon: 'success',  // 显示成功图标（默认持续1.5秒）
					//   duration: 2000    // 提示持续时间（毫秒），默认1500
					// });
				}
			}
		})
	}
	
	

	// 定义响应式数据
	const items = ref(['已发布', '未发布']);
	
	//当前登录商家用户id
	const userInfo = ref({});

	const current = ref(0);
	const colorIndex = ref(0);
	const activeColor = ref('#007aff');
	const styleType = ref('button');

	const activities = ref([
		// {
		// 	noticeId: 1,
		// 	noticeTitle: '阳春三月油江南活动开始报名了',
		// 	status: '0', // 审核通过
		// 	createTime: '2023-03-10 11:09'
		// },
		// {
		// 	noticeId: 2,
		// 	noticeTitle: '阳春三月油江南活动开始报名了',
		// 	status: '0', // 审核通过
		// 	createTime: '2023-03-10 11:09'
		// },
		// {
		// 	noticeId: 3,
		// 	noticeTitle: '阳春三月油江南活动开始报名了',
		// 	status: '2', // 未审核
		// 	createTime: '2023-03-10 11:09'
		// },
		// {
		// 	noticeId: 4,
		// 	noticeTitle: '阳春三月油江南活动开始报名了',
		// 	status: '0', // 审核通过
		// 	createTime: '2023-03-10 11:09'
		// },
		// {
		// 	noticeId: 5,
		// 	noticeTitle: '阳春三月油江南活动开始报名了',
		// 	status: '1', // 审核失败
		// 	createTime: '2023-03-10 11:09'
		// }
	]);

	// 计算属性：根据状态筛选已发布活动
	const publishedActivities = computed(() => {
		return activities.value.filter(activity => activity.status === '0');
	});

	// 计算属性：根据状态筛选未发布活动
	const unpublishedActivities = computed(() => {
		return activities.value.filter(activity => activity.status !== '0');
	});

	// 获取状态文本
	const getStatusText = (status) => {
		switch(status) {
			case '0': return '审核通过';
			case '1': return '审核失败';
			case '2': return '审核中';
			default: return '';
		}
	};

	// 获取状态颜色
	const getStatusColor = (status) => {
		switch(status) {
			case '1': return 'red'; // 审核失败
			case '2': return 'orange'; // 审核中/未审核
			default: return '';
		}
	};

	function backPage() {
		uni.navigateBack()
	}
	const goXiangQing = (item) => {
		uni.navigateTo({
		  url: `/pages/index/huodong/fabuxiangqing/fabuxiangqing?noticeId=${item.noticeId}`
		});
	}
	// 定义方法
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
		}
	};

	const styleChange = (e) => {
		if (styleType.value !== e.detail.value) {
			styleType.value = e.detail.value;
		}
	};

	const colorChange = (e) => {
		if (styleType.value !== e.detail.value) {
			console.log(e.detail.value);
			activeColor.value = e.detail.value;
		}
	};
	const goFabu = () => {
		uni.navigateTo({
			url: '/pages/index/huodong/fabu/fabu'
		})
	};
</script>

<style scoped>
	@import url('@/common/app.css');

	.card {
		margin: 0;

		height: 1200rpx;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		padding: 0px 30px;
	}

	.content {}

	.items {
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 50rpx 0;
		border-bottom: 1px solid lightgrey;
	}

	.items_left_top {
		color: black;
		margin-bottom: 10rpx;
	}

	.items_left_mid {

		margin-bottom: 10rpx;
	}

	.items_right button {
		color: white;
		font-size: 24rpx;
		background-color: #0863e7;
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
	}

	image {
		width: 25rpx;
		height: 25rpx;
	}

	.bottom {
		color: white;
		background-color: #0863e7;
		width: 500rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 100rpx;
		position: fixed;
		bottom: 100rpx;
		left: 125rpx;
		font-size: 30rpx;
	}

	.items2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 50rpx 0;
		border-bottom: 1px solid lightgrey;
	}

	.back-btn {
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
		position: relative;
	}

	.back-icon {
		width: 30px;
		height: 30px;
	}

	.back-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #fff;
		top: 80rpx;
		left: 47rpx;
		transform: translate(-50%, -50%);
	}

	.back-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		top: 70rpx;
		left: 30rpx;
	}
</style>